<!-- BaseButton.vue -->
<script setup>
import Icon from "@/components/Icon/BaseIcon.vue";
// 定义所有props
const props = defineProps({
  type: {
    type: String,
    default: 'default',
    validator: value => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: value => ['small', 'medium', 'large'].includes(value)
  },
  shape: {
    type: String,
    default: 'rectangle',
    validator: value => ['rectangle', 'round', 'circle'].includes(value)
  },
  block: Boolean,
  loading: Boolean,
  disabled: Boolean,
  icon: String,
  iconPosition: {
    type: String,
    default: 'left',
    validator: value => ['left', 'right'].includes(value)
  },
  ghost: Boolean, // 幽灵按钮
  dashed: Boolean  // 虚线边框
})

// 定义按钮事件
const emit = defineEmits(['click'])

// 处理点击事件（带状态检查）
const handleClick = (event) => {
  if (!props.loading && !props.disabled) {
    emit('click', event)
  }
}
</script>

<template>
  <button
      class="base-button"
      :class="[
      `button-${type}`,
      `button-size-${size}`,
      `button-shape-${shape}`,
      {
        'button-block': block,
        'button-loading': loading,
        'button-disabled': disabled || loading,
        'button-ghost': ghost,
        'button-dashed': dashed
      }
    ]"
      :disabled="disabled || loading"
      @click="handleClick"
  >
    <div class="button-content">
      <!-- 加载状态 -->
      <template v-if="loading">
        <Icon name="loader" class="loading-icon" />
        <span v-if="shape !== 'circle'">加载中...</span>
      </template>

      <!-- 正常状态 -->
      <template v-else>
        <!-- 左侧图标 -->
        <Icon
            v-if="icon && iconPosition === 'left' && shape !== 'circle'"
            :name="icon"
            class="button-icon"
        />

        <!-- 插槽内容 -->
        <slot v-if="shape !== 'circle'" />

        <!-- 圆形按钮只显示图标 -->
        <Icon
            v-if="icon && shape === 'circle'"
            :name="icon"
            class="button-icon"
        />

        <!-- 右侧图标 -->
        <Icon
            v-if="icon && iconPosition === 'right' && shape !== 'circle'"
            :name="icon"
            class="button-icon"
        />
      </template>
    </div>
  </button>
</template>

<style scoped>
.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-weight: 400;
  line-height: 1.5715;
  border: 1px solid transparent;
  outline: none;
}

/* 尺寸 */
.button-size-small {
  padding: 4px 12px;
  font-size: 12px;
}

.button-size-medium {
  padding: 6px 16px;
  font-size: 14px;
}

.button-size-large {
  padding: 8px 20px;
  font-size: 16px;
}

/* 形状 */
.button-shape-rectangle {
  border-radius: 4px;
}

.button-shape-round {
  border-radius: 20px;
}

.button-shape-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
}

.button-shape-circle.button-size-large {
  width: 40px;
  height: 40px;
}

.button-shape-circle.button-size-small {
  width: 24px;
  height: 24px;
}

/* 类型 - 基础颜色 */
.button-default {
  color: rgba(0, 0, 0, 0.88);
  background-color: #ffffff;
  border-color: #d9d9d9;
}

.button-primary {
  color: #fff;
  background-color: #1677ff;
  border-color: #1677ff;
}

.button-success {
  color: #fff;
  background-color: #52c41a;
  border-color: #52c41a;
}

.button-warning {
  color: #fff;
  background-color: #faad14;
  border-color: #faad14;
}

.button-danger {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}

/* 幽灵按钮 */
.button-ghost {
  background-color: transparent !important;
}

.button-ghost.button-default {
  color: rgba(0, 0, 0, 0.88);
  border-color: #d9d9d9;
}

.button-ghost.button-primary {
  color: #1677ff;
  border-color: #1677ff;
}

/* 虚线边框 */
.button-dashed {
  border-style: dashed;
}

/* 禁用状态 */
.button-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* 悬停效果 */
.base-button:not(.button-disabled):not(.button-loading):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 加载动画 */
.loading-icon {
  animation: spin 1s linear infinite;
  margin-right: 6px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 块级按钮 */
.button-block {
  display: block;
  width: 100%;
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
</style>